<template>
<view>
<!--pages/article/channel/channel.wxml-->
<view class="navbar">
  <view class="search flex-row" :style="'padding-top:' + navtop + 'px;'">
    <navigator class="back" open-type="navigateBack" hover-class="none">
      <image src="/static/images/tools/left_back.png" mode class="left-img"></image>
    </navigator>
    <picker @change="bindPickerChange" :value="pindex" :range="channelData" class="pick">
      <view class="flex-row">
        <view>{{channelData[pindex]}}</view>
        <image src="/static/images/dwicon.png" mode class="sel-img"></image>
      </view>
    </picker>
  </view>

  <view class="scolls" v-if="classList!=''">
    <view style="padding: 0 40rpx;">
      <scroll-view scroll-x="true" scroll-with-animation="true">
        <block>
          <view class="blockbox">
            <view v-for="(item, index) in classList" :key="index" class="flex-col chax" @tap="menuClick" :data-id="item.id" :data-classname="item.classname" :data-index="index">
              <text :class="item.checked?'seltext':'noseltext'">{{item.classname}}</text>
              <view class="line" v-if="item.checked"></view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>

  <view class="lanmus" v-if="lanmuLsit!=''">
    <view style="margin: 0 35rpx;border-bottom: 1px solid #e8e8e8;">
      <scroll-view scroll-x="true" scroll-with-animation="true">
        <block>
          <view class="blockbox">
            <view v-for="(item, index) in lanmuLsit" :key="index" @tap="lanmuClick" class="lanmu-list" :data-id="item.id" :data-classname="item.classname" :data-index="index">
              <text :class="item.checked?'lanmutext':'noseltext'">#{{item.classname}}#</text>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</view>

<view :style="'padding-top:' + (topHeight + menuHeight + lanmuHeight) + 'px'">
  <!-- 文章列表 -->
  <navigator v-for="(item, index) in articleList" :key="index" class="content" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
    <view class="title">
      <text>{{item.title}}</text>
      <view class="zuan-time">
        <view class="time">{{item.publictime}}</view>
      </view>
    </view>
    <image :src="item.images" v-if="item.images" mode="aspectFill"></image>
  </navigator>
  <!-- <view v-if="articleList.length>=1">
    <uni-load-more :status="requestStatus"></uni-load-more>
  </view> -->

  <!-- null-->
  <view>
    <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154945_55324.gif" mode style="width: 100%;" v-if="showLoading"></image>
    <view class="null-box" v-if="articleList==''&& shownull">
      <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113155035_59183.png"></image>
      <view class="texts">抱歉，暂未开通
        <text style="color:#f60">{{classname}}</text> 相关栏目。</view>
      <view class="texts">建议您先查看其它栏目内容！</view>
    </view>
  </view>
</view>
</view>
</template>

<script>
// pages/article/channel/channel.js
const app = getApp();
const util = require("../../../utils/util.js");
var page = 1;

export default {
  data() {
    return {
      pindex: 0,
      menuIndex: 0,
      lanmuIndex: 0,
      channelData: [],
      channelList: [],
      classList: [],
      lanmuLsit: [],
      articleList: [],
      topHeight: 0,
      menuHeight: 0,
      lanmuHeight: 0,
      showLoading: false,
      shownull: false,
      classname: "",
      siteid: "",
      type: "",
      citycode: "",
      city: "",
      navtop: "",
      inputHeight: "",
      classid: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      siteid: options.id ? options.id : '',
      type: options.type ? options.type : '',
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });
    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let citydata = res.allcity.filter(v => v.citycode == this.citycode);
        this.setData({
          city: citydata[0].cityname
        });
        this.getInfoData();
        this.getlmArticle(this.siteid, page);
      });
    }); //获取胶囊位置信息

    let menuButtonObject = uni.getMenuButtonBoundingClientRect();
    this.setData({
      navtop: menuButtonObject.top,
      inputHeight: menuButtonObject.height
    });
    var query = uni.createSelectorQuery();
    query.select('.navbar').boundingClientRect(res => {
      this.setData({
        topHeight: res.height
      });
    }).exec();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    page++;

    if (this.classid != '') {
      this.getzlmArticle(this.classid, page);
    } else {
      this.getlmArticle(this.siteid, page);
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 其他频道内容
    getInfoData() {
      let data = {
        citycode: this.citycode,
        action: 'indexlist',
        pagesize: 4,
        version: app.globalData.version
      };
      util.request('index.php', data, 'GET').then(res => {
        let infores = res.data;
        this.setData({
          channelList: infores
        });
        infores.forEach((v, k) => {
          this.channelData.push(v.wapname);
          this.setData({
            channelData: this.channelData
          });

          if (v.id == this.siteid) {
            this.setData({
              pindex: k
            }); // this.data.pindex = k;

            this.getclassData(this.siteid);
          }
        });
      });
    },

    // 获取栏目接口
    getclassData(id) {
      let siteData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'classlist',
        siteid: id,
        version: app.globalData.version
      };
      util.request('index.php', siteData, 'GET').then(res => {
        if (res.data) {
          res.data.forEach((v, k) => {
            v.checked = false;
          });
          this.setData({
            classList: res.data
          });
        }

        setTimeout(res => {
          var query = uni.createSelectorQuery();
          query.select('.scolls').boundingClientRect(res => {
            this.setData({
              menuHeight: res != null ? res.height + 10 : 0
            });
          }).exec();
        }, 10);
      });
    },

    // 获取子栏目接口
    getlanmuData(id) {
      let siteData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'classlist',
        classid: id
      };
      util.request('index.php', siteData, 'GET').then(res => {
        if (res.data) {
          res.data.forEach((v, k) => {
            v.checked = false;
          });
          this.setData({
            lanmuLsit: res.data
          });
          var query = uni.createSelectorQuery();
          query.select('.lanmus').boundingClientRect(res => {
            this.setData({
              lanmuHeight: res != null ? res.height : 0
            });
          }).exec();
        }
      });
    },

    // 获取栏目文章列表
    getlmArticle(siteid, page) {
      let infoData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        city: this.city,
        pagesize: 15,
        siteid: siteid,
        page: page
      };
      util.request('index.php', infoData, 'GET').then(res => {
        this.setData({
          articleList: this.articleList.concat(res.data)
        });
        this.setData({
          showLoading: false
        });

        if (this.articleList == "") {
          this.setData({
            shownull: true
          });
        }
      });
    },

    // 获取子栏目文章列表
    getzlmArticle(classid, page) {
      let infoData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        city: this.city,
        pagesize: 15,
        classid,
        page
      };
      util.request('index.php', infoData, 'GET').then(res => {
        this.setData({
          articleList: this.articleList.concat(res.data)
        });
        this.setData({
          showLoading: false
        });

        if (this.articleList == "") {
          this.setData({
            shownull: true
          });
        }
      });
    },

    // picker
    bindPickerChange(e) {
      this.setData({
        pindex: e.detail.value
      });
      let wapname = this.channelData[this.pindex];
      this.channelList.forEach((v, k) => {
        if (v.wapname == wapname) {
          this.setData({
            type: v.pagetype,
            lanmuHeight: "",
            lanmuLsit: [],
            articleList: [],
            classid: ''
          });
          this.getclassData(v.id);
          this.getlmArticle(v.id, page);
        }
      });
    },

    menuClick(e) {
      let id = e.currentTarget.dataset.id;
      let classname = e.currentTarget.dataset.classname;
      let index = e.currentTarget.dataset.index;
      this.classList.forEach((v, k) => {
        if (index == k) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        classList: this.classList,
        articleList: [],
        classid: id,
        classname: classname,
        showLoading: true,
        shownull: false
      });
      this.getzlmArticle(id, 1);
      this.getlanmuData(id);
    },

    lanmuClick(e) {
      let id = e.currentTarget.dataset.id;
      let classname = e.currentTarget.dataset.classname;
      let index = e.currentTarget.dataset.index;
      this.lanmuLsit.forEach((v, k) => {
        if (index == k) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        lanmuLsit: this.lanmuLsit,
        articleList: [],
        classid: id,
        classname: classname,
        showLoading: true,
        shownull: false
      });
      this.getzlmArticle(id, 1);
    }

  }
};
</script>
<style>
/* pages/article/channel/channel.wxss */
/* page{background-color: #f5f5f5;} */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
  position: fixed;
  background-color: #fff;
  z-index: 1;
  width: 100%;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
}

.search {
  margin: 0 40rpx;

}

.search  .back {
  width: 60rpx;
}

.search  .left-img {
  width: 11px;
  height: 19px;
  z-index: 10;
}

.pick {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 0.8;
}

.sel-img {
  width: 22rpx;
  height: 12rpx;
  margin-left: 10rpx;
}

.scolls {
  width: 100%;
  border-bottom: 15rpx solid #f5f5f5;
  margin-top: 30rpx;
  z-index: 1;
}

.lanmus {
  width: 100%;
  z-index: 1;
}

.lanmu-list {
  margin-right: 20rpx;
  padding: 15rpx 0;
}

.lanmutext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #f60;
}

.blockbox {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.chax {
  margin-right: 40rpx;
}

.seltext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #242424;
  margin-bottom: 15rpx;
}

.noseltext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #828282;
  margin-bottom: 22rpx;
}

.line {
  border: 6rpx solid #f60;
  width: 46rpx;
  border-radius: 40rpx;
}

.content {
  border-bottom: 1rpx solid #f5f5f5;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  margin: 10rpx 30rpx 0 30rpx;
}

.content .title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}

.content text {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.content image {
  width: 188rpx;
  height: 120rpx;
  border-radius: 4rpx;
  margin-left: 20rpx;
}

.time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 15rpx;
}

.zuan-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15rpx;
  width: 100%;
}

.zuanti {
  border: 2rpx solid rgba(255, 102, 0, 1);
  opacity: 1;
  border-radius: 16rpx;
  font-size: 18rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 102, 0, 1);
  padding: 5rpx 12rpx;
}

.null-box {
  text-align: center;
  margin-top: 400rpx;
}

.null-box image {
  width: 422rpx;
  height: 268rpx;
}

.texts {
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #a7a6a6;
  margin-top: 26rpx;
}

</style>